<template>
  <div class="personal-center">
    <el-card class="personal-info"  style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <h2 class="title-style">物业员工个人中心</h2>
      <el-form :model="userInfo" label-width="150px">
        <el-row :gutter="40" class="center-row" style="width: 100%;">
          <el-col :span="12">
            <el-form-item label="员工id">
              <el-input v-model="userInfo.id" disabled class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="userInfo.account" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userInfo.password" :disabled="!isEdit" class="disabled-style" type="password"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userInfo.sex" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码">
              <el-input v-model="userInfo.identification" disabled class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="所在小区id">
              <el-input v-model="userInfo.communityId" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="userInfo.age" :disabled="!isEdit" class="disabled-style"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="button-container">
              <template v-if="!isEdit">
                <el-button type="primary" @click="isEdit = true">修改信息</el-button>
              </template>
              <template v-else>
                <el-button type="primary" @click="handleSaveEdit">保存修改</el-button>
                <el-button type="default" @click="handleCancelEdit" style="margin-left: 10px">取消修改</el-button>
              </template>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from 'element-plus';

const userInfo = ref({
  id: '',
  name: "",
  account: "",
  password: "",
  sex: '',
  age: 0,
  identification: '',
  phone: '',
  email: '',
  communityId: ''
});
const isEdit = ref(false);
const originalUserInfo = ref({});

onMounted(async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) {
      console.error('未找到token，请先登录');
      return;
    }
    const config = {
      headers: {
        Authorization: `Bearer ${token}`
      }
    };
    const response = await axios.get('/api/users/personal', config);
    userInfo.value = response.data.data;
    originalUserInfo.value = { ...userInfo.value };
  } catch (error) {
    console.error('获取个人信息失败', error);
    ElMessage.error('获取个人信息失败，请稍后重试');
  }
});

const handleSaveEdit = async () => {
  try {
    const token = localStorage.getItem('token');
    const config = {
      headers: {
        Authorization: `Bearer ${token}`
      }
    };
    const formData = new FormData();
    formData.append('name', userInfo.value.name);
    formData.append('account', userInfo.value.account);
    formData.append('password', userInfo.value.password);
    formData.append('sex', userInfo.value.sex);
    formData.append('age', userInfo.value.age);
    formData.append('phone', userInfo.value.phone);
    formData.append('email', userInfo.value.email);
    formData.append('communityId', userInfo.value.communityId);

    const updateResponse = await axios.put('/api/users/personalUpdate', formData, config);
    if (updateResponse.data.code === 200) {
      const response = await axios.get("/api/users/personal", config);
      userInfo.value = response.data.data;
      originalUserInfo.value = { ...userInfo.value };
      isEdit.value = false;
      ElMessage.success('员工个人信息修改成功');
    } else {
      ElMessage.error(updateResponse.data.message || '保存信息失败，请稍后重试');
    }
  } catch (error) {
    console.error('保存信息失败', error);
    ElMessage.error('保存信息失败，请稍后重试');
  }
};

const handleCancelEdit = () => {
  userInfo.value = { ...originalUserInfo.value };
  isEdit.value = false;
};
</script>

<style scoped>
.personal-center {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
}

.personal-info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  width: 80%;
  min-height: 400px; /* 添加最小高度，使卡片内容布局更稳定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title-style {
  margin-bottom: 20px;
  color: #136bbd;
}

.disabled-style {
  cursor: default;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.center-row {
  display: flex;
  justify-content: center;
}
</style>